<template>
  <div>
    <div class="wrapper">
      <div class="images-container" v-dragula="imgList" drake="myDrake">
        <div class="image" v-for="(item, index) in imgList" :key="item.url">
          <img :src="item.url" />
          <div class="delete-button">
            <a href="javascript:" @click="deleteThis(index)"><i class="el-icon-close"></i></a>
          </div>
        </div>
      </div>
    </div>
    <div class="tips" v-if="imgList.length > 1">
      <span>拖拽图片以改变顺序</span>
    </div>
    <el-upload :limit="limit" :action="url" list-type="text" :on-preview="viewImg" :on-remove="removeImg" :on-success='successImg' :on-error="errorImg" :on-exceed="exceedImg" :file-list="imgList" :multiple="multiple" :show-file-list="false">
      <i class="el-icon-plus uploadImgs-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl">
    </el-dialog>
  </div>
</template>
<script>
import utils from '../ttJs/utils.js'
import Vue from 'vue'
import { Vue2Dragula } from 'vue2-dragula'
import 'dragula/dist/dragula.css'
Vue.use(Vue2Dragula, {
  logging: {
    service: false // to only log methods in service (DragulaService)
  }
});

export default {
  name: 'uploadImgs',
  data() {
    return {
      imgList: this.value,
      dialogVisible: false,
      dialogImageUrl: '',
    };
  },
  props: {
    value: [Array],
    limit: [Number],
    url: [String],
    index: [Number],
    multiple: [Boolean]
  },
  created: function() {
    const service = Vue.$dragula.$service;
    service.eventBus.$on('drop', (args) => {
      var images = '';
      var nodes = args.container.childNodes;
      for (var index = 0; index < nodes.length; index ++) {
        images = images + nodes[index].childNodes[0].src + ';';
      }
      this.$emit('getImg', images, this.index);
    })
    service.eventBus.$on('drag', (args) => {
      args.el.lastChild.className += " hide";
    })
    service.eventBus.$on('dragend', (args) => {
      args.el.lastChild.className = "delete-button";
    })
  },
  mounted() {
  },
  computed: {},
  watch: {},
  methods: {
    removeImg(file, fileList) {
      for (var index in this.imgList) {
        if (this.imgList[index].uid == file.uid) {
          this.imgList.splice(index, 1)
        }
      }
      this.emitParentGetImg();
    },
    successImg(response, file, fileList) {
      var filename = response.info.substring(response.info.lastIndexOf('/') + 1,
        response.info.indexOf('?') > 0 ? response.info.indexOf('?') : response.info.length );
      var image = {
        name: filename,
        url: response.info
      }
      this.imgList.push(image)
      this.emitParentGetImg();
    },
    errorImg(err, file, fileList) {
      utils.fail('上传图片失败')
    },
    exceedImg(files, fileList) {
      utils.fail('只能上传' + fileList.length + '张图片')
    },
    viewImg(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    deleteThis(index) {
      this.imgList.splice(index, 1);
      this.emitParentGetImg();
    },
    emitParentGetImg() {
      var images = ''
      for (var index in this.imgList) {
        if (this.limit <= 1) {
          images = this.imgList[index].url
        } else {
          images = images + this.imgList[index].url + ';'
        }
      }
      this.$emit('getImg', images, this.index)
    }
  }
};

</script>
<style rel="stylesheet/scss" lang="scss">
input[type="file"] {
  display: none;
}

.uploadImgs-icon-plus {
  margin-top: 10px;
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
}

.images-container {
  display: flex;
}

.images-container .image {
  position: relative;
  width: 160px;
  height: 150px;
  padding-right: 10px;
  border-radius: 5px;
}

.images-container .image img {
  width: 150px;
  height: 150px;
}

.delete-button {
  position: absolute;
  top: 0;
  right: 20px;
}

.tips {
  color: #888;
}

.hide {
  display: none;
}

</style>
